﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "Login";
    Layout = "";
}

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>@ViewData["Title"]</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link href="~/lib/bootstrap/font/bootstrap-icons.css" rel="stylesheet" />
        <link href="~/css/style.css" rel="stylesheet" />
        <link href="~/css/loading.css" rel="stylesheet" />
    </head>
    <body>
        <div id="bg" style="display: none;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.6);z-index: 999;"></div>

        <div id="load" style="display: none;">
            <div>G</div>
            <div>R</div>
            <div>E</div>
            <div>E</div>
        </div>

        <div id="infoSuccess" class="m-2 float-right alert alert-success" role="alert" style="width: 300px;position: absolute;right: 0px;top: 0px;z-index:9999;">
            <strong>你好呀！</strong> 登录成功<i class="float-right align-middle mt-1 bi bi-emoji-laughing"></i>
        </div>
        <div id="infoFail" class="m-2 float-right alert alert-danger" role="alert" style="width: 300px;position: absolute;right: 0px;top: 0px;z-index:9999;">
            <strong>很抱歉！</strong> 登录失败<i class="float-right align-middle mt-1 bi bi-emoji-frown"></i>
        </div>

        <div class="panda">
            <div class="ear"></div>
            <div class="face">
                <div class="eye-shade"></div>
                <div class="eye-white">
                    <div class="eye-ball"></div>
                </div>
                <div class="eye-shade rgt"></div>
                <div class="eye-white rgt">
                    <div class="eye-ball"></div>
                </div>
                <div class="nose"></div>
                <div class="mouth"></div>
            </div>
            <div class="body"> </div>
            <div class="foot">
                <div class="finger"></div>
            </div>
            <div class="foot rgt">
                <div class="finger"></div>
            </div>
        </div>

        <div class="mform" id="mform">
            <form>
                <div class="hand"></div>
                <div class="hand rgt"></div>
                <div id="test" class="test bi bi-info-circle text-warning"></div>
                <h1 class="mt-3 mb-2">登录界面</h1>
                <div class="mform-group">
                    <input id="userName" required="required" class="mform-control" />
                    <label class="mform-label">用户名：</label>
                </div>
                <div class="mform-group">
                    <input id="pwd" type="password" required="required" class="mform-control" />
                    <label class="mform-label">密码：</label>
                </div>
            </form>
            <button id="login" class="mbtn">登录</button>
        </div>

        @*<div class="d-flex justify-content-center align-items-center" style="height:85vh;">
            <div class="p-4 shadow rounded d-flex flex-column justify-content-center" style="height:420px;width:400px;">
                <h1 class="text-info text-center" style="margin-bottom:30px;">登录界面</h1>
                <form>
                    <div class="form-group d-block">
                        <label for="userName">用户名：</label>
                        <input id="userName" type="text" class="form-control" placeholder="请输入用户名" />
                    </div>
                    <div class="form-group d-block">
                        <label for="pwd">密码：</label>
                        <input id="pwd" type="password" class="form-control" placeholder="请输入密码" />

                    </div>
                </form>
                <div>
                    <button type="button" id="test" class="btn float-left btn-outline-warning" disabled>
                        测试认证
                    </button>
                    <button type="button" id="login" class="btn float-right btn-outline-primary">
                        登录<i class="bi ml-2 bi-arrow-right-circle"></i>
                    </button>
                </div>
            </div>
        </div>*@
    </body>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/js/md5.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/script.js"></script>
    <script>
        $(document).ready(function () {
            $('#pwd').focusin(function () {
                $('#mform').addClass('up')
            });
            $('#pwd').focusout(function () {
                $('#mform').removeClass('up')
            });
            $("#infoSuccess").hide();
            $("#infoFail").hide();

            let token = "";
            function Login() {
                $("#bg").show()
                $("#load").show()
                setTimeout(function () {
                    $.get("https://localhost:44348/api/Login", { userName: $("#userName").val(), pwd: hex_md5($("#pwd").val()) },
                    function (data) {
                        if (data.data == false) {
                            $("#bg").hide()
                            $("#load").hide()
                            $("#infoFail").show();
                            setTimeout(function(){$("#infoFail").hide();},3000);
                            $("#userName").val("");
                            $("#pwd").val("");
                        } else {
                            $("#bg").hide()
                            $("#load").hide()
                            $("#infoSuccess").show();
                            setTimeout(function(){$("#infoSuccess").hide();},3000);
                            token = data.data;
                            $("#test").removeClass("text-warning");
                            $("#test").addClass("text-success");
                            $("#test").removeAttr("disabled");
                            setTimeout(function () {
                                window.location.href = '/TodoView/Index'
                            },1000)
                        }
                    });
                }, 2000);
                
            }
            $("#pwd").keyup(function(e) {
                if (e.keyCode == 13) {
                    Login();
                }
            })
            $("#login").click(function () {
                Login();
            });
            $("#test").click(function () {
                $.ajax({
                    url: "https://localhost:44348/api/Login/token",
                    type: "GET",
                    headers: {
                        Authorization: "Bearer "+token
                    },
                    success: function (data) {
                            console.log(data)
                        },
                    error: function (error) {
                            console.log(error.status)
                            console.log(error.statusText)
                        }
                })
            });  
        });

    </script>
    </html>
